<!-- delete confirmation dialog box -->
	
		<div class="table">
               
                <base href="<?php echo base_url() ?>" />

                <!--<link type="text/css" rel="stylesheet" href="css/demo_table.css" />-->
                <div id="ajaxLoadAni">
                    <img src="file/smooth/images/ajax-loader.gif" alt="Ajax Loading Animation" />
                    <span>Loading...</span>
                </div>
                
                        <table id="records" class="editedRecords">
                            <thead>
                                <tr>
                                        <th>No</th>
                                        <th>Territory Path</th>
                                        <th>Agent Name</th>
                                        <th>Address</th>
                                        <th>Business Focus</th>
                                        <th>Agent Type</th>
                                        <th width=25>Maintained By</th>
                                        <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
<div id="delConfDialog" title="Confirm">
    <p>Are you sure?</p>
</div>
<!-- message dialog box -->
<div id="msgDialog"><p></p></div>
  
                
        </div>

<script type="text/template" id="readTemplate" class="editedReadTemplate">
        <tr id="${agent_id}">
                <td width="30px">${nomor}</td>
				<td>${territory_path}</td>
				<td>${agent_name}</td>
                <td>${agent_address}, ${agent_city}</td>
                <td>${agent_business_focus}</td>
				<td>${agent_type}</td>
                <td>${maintained_by}</td>
                
                <td width="110px"><a class="updateBtnEdited" href="${updateLink}">Edit</a> | <a class="deleteBtnEdited" href="${deleteLink}">Delete</a> | <a class="deleteBtn" href="${deleteLink}">View Map</a></td>
        </tr>
</script>

<script type="text/javascript">
var readUrlEdited   = 'index.php/act_agents/read',
    updateUrlEdited = 'index.php/master/agents/update',
    delUrlEdited    = 'index.php/act_agents/delete',
    delHref,
    updateHref,
    updateId;

$( document ).ready( function() {
	
    readUsersEdited();
    //$( 'td' ).editable();
	
	$( '#msgDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                $( this ).dialog( 'close' );
            }
        }
    });
    
    $( '#delConfDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
            'Yes': function() {
                //display ajax loader animation here...
                $( '#ajaxLoadAni' ).fadeIn( 'slow' );
                $( this ).dialog( 'close' );
                $.ajax({
                    url: delHref,
                    success: function( response ) {
                        //hide ajax loader animation here...
                        $( '#ajaxLoadAni' ).fadeOut( 'slow' );
                        
                        $( '#msgDialog > p' ).html( response );
                        $( '#msgDialog' ).dialog( 'option', 'title', 'Success' ).dialog( 'open' );
                        
                        $( 'a[href=' + delHref + ']' ).parents( 'tr' )
                        .fadeOut( 'slow', function() {
                            $( this ).remove();
                        });
                        
                    } //end success
                });
            } //end Yes
        } //end buttons
    }); //end dialog
    
    
    $( '.editedRecords' ).delegate( 'a.deleteBtn', 'click', function() {
        delHref = $( this ).attr( 'href' );
        $( '#delConfDialog' ).dialog( 'open' );
            return false;
    }); //end delete delegate
    // --- Create Record with Validation ---
    
}); //end document ready


function readUsersEdited() {
    //display ajax loader animation
	$( '#ajaxLoadAni' ).fadeIn( 'slow' );
    
    $.ajax({
        url: readUrlEdited,
        dataType: 'json',
        success: function( response ) {
			
            var j=1;
            
			for( var i in response ) {
                response[ i ].updateLink = updateUrlEdited + '/' + response[ i ].agent_id;
                response[ i ].deleteLink = delUrlEdited + '/' + response[ i ].agent_id;
                response[ i ].nomor = j;
                j++;
            }
            //clear old rows
            $( '.editedRecords > tbody' ).html( '' );
            
            //append new rows
            $( '.editedReadTemplate' ).render( response ).appendTo( ".editedRecords > tbody" );
            
            //apply dataTable to #records table and save its object in dataTable variable
            if( typeof dataTable == 'undefined' )
			{
                dataTable = $( '.editedRecords' ).dataTable({
					"bJQueryUI": true,
					/*"fnDrawCallback": function()
					{
						$('#records tbody tr td').editable();
					}*/
				});
			}
			
            //hide ajax loader animation here...
            $( '#ajaxLoadAni' ).fadeOut( 'slow' );
        }
    });
	
}// end readUsers
</script>